<template>
  <div class="demo">
    <div class="demo-title">搜索框</div>
    <div class="demo-content">
      <Space direction="vertical">
        <Input.Search
          v-model:value="value"
          placeholder="input search text"
          style="width: 200px"
          @search="onSearch"
        />
        <Input.Search
          v-model:value="value"
          placeholder="input search text"
          enter-button
          @search="onSearch"
        />
        <Input.Search
          v-model:value="value"
          placeholder="input search text"
          enter-button="Search"
          size="large"
          @search="onSearch"
        />
        <Input.Search
          v-model:value="value"
          placeholder="input search text"
          size="large"
          @search="onSearch"
        >
          <template #enterButton>
            <Button>Custom</Button>
          </template>
        </Input.Search>
      </Space>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import Button from '@sscd/button';
  import Space from '@sscd/space';
  import Input from '@sscd/input';
  const value = ref<string>('');
  const onSearch = (searchValue: string) => {
    console.log('use value', searchValue);
    console.log('or use this.value', value.value);
  };
</script>

<style lang="less" scoped></style>
